{extend name="iframe" /}
{block name="css"}
    <style type="text/css">
        .addForm{
            margin-top: 20px;
        }
        .submit_btn{
            display: none;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
    </style>
{/block}

{block name="content"}
    <div class="container-fluid content-wrapper-box">
        <div class="content-wrapper">
            <form class="form-horizontal addForm" action="" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        上级分类&nbsp;
                    </label>
                    <div class="col-xs-4" style="padding-top: 7px;">
                        <select name="parent_id" class="form-control" >
                            <option value='0' >作为一级栏目</option>
                            {volist name="cate" id="cate"}
                            <option value='{$cate.id}' >{$cate.catname}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        栏目名称&nbsp;
                    </label>
                    <div class="col-xs-4">
                        <input type="text" name="catname" class="form-control" required data-msg="栏目名称不能为空">
                    </div>
                    <label class="control-label col-xs-2">
                        英文名称&nbsp;
                    </label>
                    <div class="col-xs-4">
                        <input type="text" name="enname" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        SEO标题&nbsp;
                    </label>
                    <div class="col-sm-4 col-xs-8">
                        <input type="text" name="title" class="form-control" placeholder="请输入SEO标题" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        SEO关键字&nbsp;
                    </label>
                    <div class="col-sm-10 col-xs-8">
                        <input type="text" name="keywords" class="form-control" placeholder="请输入SEO关键字" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        SEO描述&nbsp;
                    </label>
                    <div class="col-sm-10 col-xs-8">
                        <input type="text" name="description" class="form-control" placeholder="请输入SEO描述" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        是否启用&nbsp;
                    </label>
                    <div class="col-xs-4">
                        <input type="checkbox" value="1" name="status" class="switch" checked>
                    </div>
                    <label class="control-label col-xs-2">
                        导航显示
                    </label>
                    <div class="col-xs-4">
                        <input type="checkbox" value="1" name="is_menu" class="switch" checked>
                    </div>
                </div>

                <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
                <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
            </form>
        </div>
    </div>
{/block}

{block name="script"}
    <script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript">
        $(function () {
            //初始化开关选项
            switchInit();
            //初始化日期控件
            dateTimePickerInit();
            //初始化文件控件
            fileInit();
            //初始化编辑器
            ueditorInit();
        });
        //初始化开关选项
        function  switchInit() {
            var switch_obj = $('.switch'),i=0;
            switch_obj.bootstrapSwitch({
                onText:"<i class='fa fa-check'></i>",
                offText:"<i class='fa fa-close'></i>",
                onColor:"success",
                offColor:"danger",
                //size:"small",//无效
                onSwitchChange:function(event,state){
                    $(this).prop("checked",true);//管他什么checkbox 让他选中  需求就是这样
                    if(state===true){
                        $(this).val(1);
                    }else{
                        $(this).val(2);
                    }
                }
            });
            switch_obj.bootstrapSwitch('size','mini');
            for(;i < switch_obj.length;i++){
                if(switch_obj.eq(i).val()==='1'){
                    switch_obj.eq(i).bootstrapSwitch('state',true);
                }else{
                    switch_obj.eq(i).bootstrapSwitch('state',false);
                }
            }
        }
        //初始化日期控件
        function dateTimePickerInit() {
            $('.dateTimePicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                locale: moment.locale('zh-cn')
            });
        }
        //提交表单
        function submitFrom() {
            var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //表单验证
            $(".addForm").validate({
                keydown:true,
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        dataType:'json',
                        success:function (response) {
                            if(response.code === 0){
                                parent.toastr.success(response.msg);
                            }else{
                                parent.toastr.error(response.msg);
                            }
                            //刷新数据表格
                            parent.layer.close(frameIndex);
                            parent.searchForm();
                        }
                    });
                }
            })
        }
        function resetForm() {
            $('.addForm')[0].reset();
            switchInit();
        }
    </script>
{/block}